<%@ page import="bean.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%request.setCharacterEncoding("UTF-8"); %>
<%@ page isELIgnored="false" %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="/web/chat.css">
  <title>网页聊天系统</title>
</head>

<body id="body">

<script src="web/vue.js"></script>
<script src="jquery-3.6.0.js"></script>
<script src="jquery-3.6.0.min.js"></script>
<script src="/web/chat.js"></script>
<script>
  user = {
    id:'',
    userName: '',
    img: ''
  }
  window.onload=function(){
    <% Object obj = request.getAttribute("map");
      System.out.println(obj);
    %>

    user.id = <%=obj%>.id;
    user.userName = <%=obj%>.username;
    user.img = <%=obj%>.img;
    console.log(user)
    yong()
    kk()
    document.getElementById("title_main").innerHTML= "聊天"
    <%--    <% User user = (User) request.getAttribute("user");%>--%>
  }
</script>
<div id="love" style="position: fixed; z-index: 99;">
  <div id="">
    <img id="love_image" src="" alt="">
  </div>
</div>


</div>
<div class="container" id="container_">
  <div id="modal_" class="modal center" >
    <div id="modal" class="modal-content">
      <div class="modal-header">
        <h2 style="color:#fff;">
          添加朋友
        </h2>
        <img onclick="closes()" class="iconss" src="web/img/cut.png">
      </div>
      <div class="modal-body ">
        <div style="height:50%" class="flex_c">
        <div class="flex_c" style="height: 35px;width:440px ;background-color: #D1ECF1;border-radius: 0.3em"><p style=";color: #0C5460;font-size:16px;letter-spacing: 1px;margin-left: 20px" >向朋友发送邀请。</p></div>
        <div class="flex_c" style="height:60%">
          用户ID
          <input id="friendID" style="height: 35px;width:440px ;border-radius: 0.3em" placeholder="请输入用户ID" placeholder-style="margin-left:20px">
        </div>
      </div>
      </div>
      <div onclick="add()" class="modal-footer" >
        <div class="btn btn-primary"><p>提交</p></div>
      </div>
    </div>
    <div id="modal__" class="modal center" >
      <div id="modal___" class="modal-content">
        <div class="modal-header">
          <h2 style="color:#fff;">
            添加朋友
          </h2>
          <img onclick="close1()" class="iconss" src="web/img/cut.png">
        </div>
        <div class="modal-body ">
          <div style="height:50%" class="flex_c">
            <div class="flex_c" style="height: 35px;width:440px ;background-color: #D1ECF1;border-radius: 0.3em"><p style=";color: #0C5460;font-size:16px;letter-spacing: 1px;margin-left: 20px" >发送入群申请。</p></div>
            <div class="flex_c" style="height:60%">
              群ID
              <input id="QID" style="height: 35px;width:440px ;border-radius: 0.3em" placeholder="请输入群ID" placeholder-style="margin-left:20px">
            </div>
          </div>
        </div>
        <div onclick="addQQ()" class="modal-footer" >
          <div class="btn btn-primary"><p>提交</p></div>
        </div>
      </div>
  <!-- 功能列表 -->
  <div class="tools_container">
<%--    <div class="brow-list"></div>--%>

    <div class="top_container">
      <img class="chat_img" src="./web/img/chat.png" alt="">
      <div>
        <div id="消息" onclick="tap(id)" class="iconss_container" style="background: #F2F2F2" >
            <img title="消息"  class="icon" src="./web/image/xiaoxi.png" alt="">
        </div>
        <div id="群聊" onclick="tap(id)" class="iconss_container" style="background: #F2F2F2">
            <img title="群聊"  class="icon" src="./web/image/qun.png" alt="">
        </div>
        <div id="好友" onclick="tap(id)" class="iconss_container" style="background: #F2F2F2">
            <img  title="好友"  class="icon" src="./web/image/people.png" alt="">
        </div>
        <div id="消息通知" class="iconss_container" onclick="tap(id)" style="background: #F2F2F2">
            <img  title="消息通知"  class="icon" src="./web/image/tongzhi.png" alt="">
        </div>
      </div>
    </div>
    <div class="bottom_container">
      <img onclick="change_bg()" title="切换背景颜色" class="moon" src="./web/image/withe.png" alt="">
      <img class="avaterimg" src="./web/img/man_avatar1.jpg" alt="">
    </div>
  </div>

  <!-- 好友列表 -->
  <div class="main_container">
    <div class="line_container">
      <!-- 我的信息 -->
      <div class="jie_container">
        <h3 id="title_main"></h3>
        <div>
          <div onclick="people_content()" class="wai center">
            <img class="icons" src="./web/image/add.png" alt="">
          </div>
          <div class="wai center">
            <img onclick="addQU()" class="icons" src="./web/image/add1.png" alt="">
          </div>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="search_container">
          <input id="search" class="search" name="search" placeholder="搜索聊天" type="text">
          <img onclick="search()" class="icons" src="./web/img/search.png">
      </div>

      <!-- 好友列表 -->
      <div id="liebiao" class="liebiao_container" style="overflow:auto;"></div>
    </div>

    <!-- 聊天框 -->
    <div class="chat_container" style="overflow:auto;">
      <!-- 名字 -->
      <div class="chat_title_container ">
        <div class="flex_r information_container">
          <img id="chat_img" class="chat_lie_img1" src="./web/img/man_avatar2.jpg" alt="">
          <div class="flex_c info_container">
            <p id="chat_name" class="chat_name"></p>
            <div id="chat_qian" class="chat_qian"></div>
          </div>
        </div>
        <div class="flex_r icons_container">
          <img class="icon" src="./web/image/yuyin.png" alt="">
          <img class="icon" src="./web/image/video.png" alt="">
          <img class="icon" src="./web/image/more.png" alt="">
        </div>
      </div>
      <!-- 聊天框 -->
      <div id="chat" class="chat_main_container" style="overflow:auto;">

      </div>
      <!-- 输入信息 -->
      <div class="chat_bottom_container">

          <div class="chat_input_box" >
            <img class="biaoqing" src="./web/image/biaoqing.png" alt="">
            <input id="content" name="content" type="text" class="chat_input">
            <div class="flex_r button_box">
              <button title="添加文件" type="file" class="wenjian_button">
                <img class="icons" src="./web/image/wenjian.png" alt="">
              </button>
              <button title="发送" onclick="chat()" class="submit_button">
                <img class="icons" src="./web/image/submit.png" alt="">
              </button>
            </div>
          </div>

      </div>
    </div>
  </div>
  <!-- <div class="bottom_comtainer"></div> -->
</div>
</body>

</html>